<template>
  <section>
    <el-row>
      <el-col :span="6">
        选择公司：
        <el-select v-model="selCompany" size="small" placeholder="请选择公司">
          <el-option v-for="company in companies" :key="company.id" :label="company.companyName" :value="company.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        选择部门：
        <el-select v-model="selDepartment" size="small" placeholder="请选择部门">
          <el-option v-for="department in departments" :key="department.id" :label="department.name" :value="department.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-button @click="btnAddAccount" type="primary" size="mini">新建账户</el-button>
      </el-col>
    </el-row>
    <el-row v-show="accounts">
      <el-table :data="accounts">
        <el-table-column type="index"/>
        <el-table-column label="账户ID" prop="id"/>
        <el-table-column label="账户code" prop="code"/>
        <el-table-column label="支付类型" prop="payType.name"/>
      </el-table>
    </el-row>
    <el-dialog title="编辑账户" :visible.sync="showEditAccount">
      <el-form :model="accountDetail" label-width="80px" size="small">
        <el-form-item label="账户编码">
          <el-input v-model="accountDetail.code"></el-input>
        </el-form-item>
        <el-form-item label="支付方式">
          <el-select v-model="accountDetail.payTypeCode" placeholder="请选择支付方式">
            <el-option :label="payType.name" :value="payType.code" v-for="payType in payTypeList" :key="payType.id"></el-option>
          </el-select>
        </el-form-item>
        <!--
          departmentId:this.selDepartment,
          code:this.selDepartment+'号部门下账户1',
          configData:{appId:'appId',mchId:'mchId',mchKey:'mchKey',subAppId:'subAppId',subMchId:'subMchId'},
         payTypeCode:'wxpay'-->
        <el-form-item label="configData" >
          <el-row>
            <el-col :span="6" style="margin-right: 10px">appId:
              <el-input v-model="accountDetail.configData.appId" size="mini"></el-input>
            </el-col>
            <el-col :span="6" style="margin-right: 10px">mchId:
              <el-input v-model="accountDetail.configData.mchId" size="mini"></el-input>
            </el-col>
            <el-col :span="6" style="margin-right: 10px">mchKey:
              <el-input v-model="accountDetail.configData.mchKey" size="mini"></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6" style="margin-right: 10px">subAppId:
              <el-input v-model="accountDetail.configData.subAppId"></el-input>
            </el-col>
            <el-col :span="6" style="margin-right: 10px">subMchId:
              <el-input v-model="accountDetail.configData.subMchId"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="createAccount">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  export default {
    name: "account",
    data() {
      return {
        companies:[],
        selCompany:null,
        departments:[],
        selDepartment:null,
        accounts:null,
        showEditAccount:false,
        accountDetail:{configData:{}
        },
        payTypeList:null
      }
    },
    created(){
      this.getCompanies()
    },
    computed:{
    },
    watch:{
      selCompany(nv,ov){
        if(nv){
          this.getDepartments(nv)
        }
      },
      selDepartment(nv,ov){
        if(nv){
          this.getAccountList(nv)
        }
      }
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      getCompanies(){//加载公司列表
        this.fetch({name:"getCompanyList"})
          .then(res=>{
            console.log(res)
            this.companies = res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getDepartments(companyId){//加载公司下部门列表
        this.fetch({name:"getDepartmentList",data:{companyId}})
          .then(res=>{
            this.departments=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getAccountList(departmentId){//加载部门下账户列表
        this.fetch({name:"getAccountList",data:{departmentId}})
          .then(res=>{
            console.log(res)
            this.accounts=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      btnAddAccount(){
        console.log('新建账户')
        if(this.selCompany && this.selDepartment){
          //显示一个
          this.showEditAccount = true
          this.getPayTypeList()
        }
      },
      getPayTypeList(){
        this.fetch({name:"getPayTypeList"})
          .then(res=>{
            console.log(res)
            this.payTypeList = res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      checkInAccountDeatil(payTypeCode){
        if(payTypeCode === 'wxpay'){
          //检查configData是否都填了
          let tmp = this.accountDetail.configData
          if(tmp.appId && tmp.mchId && tmp.mchKey && tmp.subAppId && tmp.subMchId){
            //全都有
            let data = {
              departmentId:this.selDepartment,
              code:this.accountDetail.code,
              configData:tmp,
              payTypeCode:payTypeCode
            }
            return true
          }else {
            this.$message({type:'error',message:'请完善configData信息'})
          }
        }else if(payTypeCode === 'balance'){
          let data = {
            departmentId:this.selDepartment,
            code:this.accountDetail.code,
            configData:this.accountDetail.configData,
            payTypeCode:payTypeCode
          }
          return data
        }
      },
      createAccount(){
        console.log(this.accountDetail)
        let data = this.checkInAccountDeatil(this.accountDetail.payTypeCode)
        console.log(data)
        this.fetch({name:"createAccount",data:data})
          .then(res=>{
            console.log(res)
            this.$message({type:'success',message:'创建成功！'})
            this.showEditAccount = false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      }
    }
  }
</script>

<style scoped>

</style>
